<!--
    视频图片预览样式1.
    默认呈半遮罩状态，当鼠标移动到图片区域的时候，遮罩窗体上移，显示出全部信息
    实现原理，先创建2个div块，长度170，宽度96，把4个角改为弧形。
    然后把2个div叠加到一起，设置z-index，外面的div设置为半透明。
    然后使用下面的动画属性以及:hover选择器来实现这个效果
    transition:opacity 0.2s;
-->

<template>
    <div>
        <div class="report-recommand">推荐</div>
        <div class="out-module-nochar"  @click="showVideo" v-bind:style='{"background-image":"url("+videoInfo.img220x125+")"}' >
            <div class="inner-module-nochar">
                <div class="report-show-detail-info-2 ziti-miaobian">
                    视频时长:{{videoInfo.videoTimeStr}}<br/>
                    播放:{{videoInfo.bofang}}
                </div>
            </div>

        </div>


        <div class="report-second-main-title-1" @click="showVideo" v-bind:title="videoTitle">{{videoTitleSubStr}}</div>
        <div class="report-second-sub-title-1">up:{{videoInfo.nickName}}</div>

    </div>

</template>

<script>
    export default {
        name: 'showHoverMaskWithOutCharacters',
        props:{
            videoInfo:{
                type:Object
            }
        },
        data () {
            return {
                videoTitle:'',
                videoTitleSubStr:''//对标题进行格式化，过长的标题会以省略号形式显示
            }
        },
        methods:{
            showVideo(){
                var self = this;
                var localStorage = window.localStorage;
                localStorage.setItem("videoInfo",JSON.stringify(this.videoInfo));
                var formData = new FormData();
                formData.append("videoId",this.videoInfo.videoId);
                self.$api.post('video-service/videoController/addBofangCount',formData,result=>{
                    self.$router.push('/chamVideo');
                });

            }
        },
        mounted() {
            var videoTitle = this.videoInfo.videoTitle;
            this.videoTitle = videoTitle;

            var videoTitleSubStr = '';
            if(videoTitle.length>20){
                videoTitleSubStr = videoTitle.substring(0,20)+"...";
            }else{
                videoTitleSubStr = videoTitle;
            }
            this.videoTitleSubStr = videoTitleSubStr;
        }
    }
</script>

<style scoped>

    .out-module-nochar{
        width:155px;
        height:96px;
        /*background-image: url("../assets/img163x96.jpg");*/
        background-repeat:no-repeat;
        background-size:100% 100%;
        border-radius:4px;
        z-index:1;
        overflow:hidden;
        float:left;
    }

    .inner-module-nochar{
        width:155px;
        height:96px;

        /**
            使用渐变透明色，上下两个渐变色均设置为黑色，透明系数均设置为0.4
         */
        background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4));
        border-radius:4px;
        z-index:2;
        display: inline-block;
        margin-top:96px;
        transition:opacity 0.2s;
    }

    .out-module-nochar:hover .inner-module-nochar{
        margin-top:0px;
        cursor:pointer;
    }

    .report-second-main-title-1{
        float:left;
        color:black;
        width:155px;
        min-height:20px;
        max-height:40px;
        line-height:20px;
    }

    .report-second-sub-title-1{
        float:left;
        color:#555555;
        width:155px;
        height:25px;
        font-size:12px;
    }

    .report-second-main-title-1:hover{
        cursor:pointer;
        color:#fd4c5a;
    }

    .report-second-sub-title-1:hover{
        cursor:pointer;
        color:#fd4c5a;
    }

    .report-recommand{
        position:absolute;
        width:40px;
        height:20px;
        background-color:rgba(251,91,104,.9);
        line-height:20px;
        text-align:center;
        border-top-left-radius:4px;
        border-bottom-right-radius:4px;
        cursor:pointer;
        pointer-events: none;
    }

    /**
        这个选择器先拿相邻的div，再拿子div，很绕。
     */
    .report-recommand:hover +div>div{
        margin-top:0px;
    }

    .report-show-detail-info-2{
        width:150px;
        height:40px;
        line-height:20px;
        font-size:12px;
        padding-left:5px;
        margin-top:56px;
    }

    .ziti-miaobian{
        text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
        -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
        -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
    }

</style>
